<template>
    <div class="left-menu">
        <!-- 操作目录 -->
        <div class="operate-wrapper m-main-bg">
            <ul class="operate-list">
                <li :key="'operate'+index" v-for="(item,index) in operate" @click="changeShowMenu(item, index)" class="operate-item" :class="index==activeIndex?'active':''">
                    <div class="icon"><i class="iconfont" :class="item.classname"></i></div>
                    <div class="text">{{item.title}}</div>
                </li>
            </ul>
        </div>
        <!-- 操作详情 -->
        <div class="operate-detail">
            <layerlist ref="layerlist" v-show="show=='layer'"></layerlist>
            <settinglist v-show="show=='setting'"></settinglist>
            <referencelist v-show="show=='reference'"></referencelist>
        </div>
    </div>
</template>
<script>
    import layerlist from './layer-list'
    import settinglist from './setting-list'
    import referencelist from './reference-list'
    export default {
        data(){
            return {
                show: 'layer',
                activeIndex: 0,
                operate: [{
                    title: '图层列表',
                    classname: 'icon-earth',
                    type: 'layer'
                },{
                    title: '参照列表',
                    classname: 'icon-discount',
                    type: 'reference'
                },{
                    title: '属性设置',
                    classname: 'icon-set',
                    type: 'setting'
                },{
                    title: '输出坐标',
                    classname: 'icon-print',
                    type: 'output'
                }]
            }
        },
        props: {
            laylist: {
                type: Array,
                default(){
                    return [];
                }
            }
        },
        methods: {
            changeShowMenu(item, index){
                this.activeIndex = index;
                this.show = item.type || 'layer';
            },
            removeOverlays(ids){
                this.$emit('removeoverlays', ids);
            },
            changeOverlayData(result){
                this.$refs.layerlist.changeOverlayData(result);
            }
        },
        components: {
            layerlist,
            settinglist,
            referencelist
        }
    }
</script>

<style lang="scss" scope>
    .left-menu {
        height: 100%;
        border-right: 1px solid #ddd;
        .operate-wrapper {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100px;
        }
        .operate-list {
            margin: 0;
            padding: 0;
            list-style: none;
            text-align: center;
            .operate-item {
                padding: 26px 0;
                color: #fff;
                cursor: pointer;
                .icon {
                    .iconfont {
                        font-size: 20px;
                    }
                }
                .text {
                    margin-top: 10px;
                    font-size: 14px;
                }
                &:hover {
                    background-color: #069abf;
                }
                &.active {
                    background-color: #069abf;
                }
            }
        }
        .operate-detail {
            margin-left: 100px;
            height: 100%;
            overflow: auto;
        }
    }
</style>

